import React, {memo, useEffect, useState} from "react";
import NewSongStyle from "./NewSongStyle";
import FilterBar from "../../../../components/part/filterBar/FilterBar";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import {getSysDictData} from "../../../../services/sysDictData";
import {DictData} from "../../../../interface/SysDictDataInterface";
import {getAlbumListApi} from "../../../../services/album";
import {AlbumInterface, AlbumPageDTO} from "../../../../interface/AlbumInterface";

export default memo(function NewSong() {
  //地区筛选栏列表
  const [areaList,setAreaList] = useState<DictData[]>([]);
  //专辑列表
  const [albumList,setAlbumList]=useState<AlbumInterface[]>([]);
  //获取字典
  useEffect(()=>{
    getSysDictData({dictType:"area_type"}).then((result:any)=>{
      console.log(result);
      setAreaList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
    filterBarCallbackFunc();
  },[]);

  //单击筛选栏后,子组件筛选栏的回调方法
  function filterBarCallbackFunc(item?: DictData) {
    const params:AlbumPageDTO={
      pageNum:1,
      pageSize:10
    };
    if (item) {
      params.areaType=item.sysDictDataId;
    }
    getAlbumListApi(params).then((result:any)=>{
      // console.log(result);
      setAlbumList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }

  return (
    <NewSongStyle>
      <FilterBar
        filterList={areaList}
        callbackFunction={filterBarCallbackFunc}
        defaultBtn={"最新"}
      />
      <main className="new-song-box">
        {
          albumList.map((item) => {
            return (<SongSheetItem key={item.albumId}
                                   size={190}
                                   coverUrl={item.albumCover}
                                   songName={item.albumName}
                                   sing={item.albumSingerName}
                                   isShowCover={true}
                                   type={3}
                                   id={item.albumId}
            />)
          })
        }

      </main>
    </NewSongStyle>
  );
});
